<template>
  <!-- 高德地图 -->
  <div class="box-map">
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import mapIcon1 from "@assets/img/mapIcon1.png";
import mapIcon2 from "@assets/img/mapIcon2.png";
export default {
  name: "aMap",
  data() {
    return {
      //vue2中不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
      //map:null,---- https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1
      center: { lng: 114.31158155, lat: 30.59846674 },
      marker: null,
      markers: null,
    };
  },
  props: {
    lngLat: {
      type: String,
      default: "",
    },
    points: {
      type: Array,
      default: [],
    },
    more: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    lngLat: {
      handler(newVal, oldVal) {
        if (newVal != "") {
          let arr = newVal.split(",");
          if (arr.length == 2) {
            this.center = { lng: arr[0], lat: arr[1] };
            this.setPoint();
          }
        }
      },
    },
    more: {
      handler(newVal) {
        if (newVal === true) {
          this.setPoints();
        }
      },
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods: {
    initMap() {
      let that = this;
      AMapLoader.load({
        key: "2251d0e94424e7d402851a2f202eba8c", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            resizeEnable: true,
            viewMode: "3D", //是否为3D地图模式
            zoom: 10.3, //初始化地图级别
            center: [this.center.lng, this.center.lat], //初始化地图中心点位置
          });
          this.map.on("click", this.clickHandler);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //地图点击事件
    clickHandler(e) {
      this.center.lng = e.lnglat.getLng();
      this.center.lat = e.lnglat.getLat();
      this.$emit("locationInfo", this.center);
    },
    //单个点
    setPoint() {
      if (!this.map) return;
      if (this.marker) {
        this.map.remove(this.marker);
      }
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(this.center.lng, this.center.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: mapIcon1,
        anchor: "bottom-center", // 设置锚点方位
      });

      // 将创建的点标记添加到已有的地图实例：
      this.map.setZoomAndCenter(18, [this.center.lng, this.center.lat]);
      this.map.add(this.marker);
    },
    //批量点
    setPoints() {
      if (!this.map || this.points.length < 1) return;
      if (this.markers) {
        this.map.remove(this.markers);
      }
      this.markers = this.points.map((o, ind) => {
        return new AMap.Marker({
          position: new AMap.LngLat(o[0], o[1]), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: mapIcon2,
          title: ind,
          anchor: "bottom-center", // 设置锚点方位
        });
      });

      // 将创建的点标记添加到已有的地图实例：
      this.map.setZoomAndCenter(5, [this.center.lng, this.center.lat]);
      this.map.add(this.markers);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box-map {
  padding-top: 40px;
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
}
</style>
